<template>
  <h2>商品类目</h2>
  <!-- tree控件 -->
  <el-tree
      :props="config"
      :data="categoryList"
      default-expand-all
      node-key="id"
      ref="treeRef"
      highlight-current="true"
      :expand-on-click-node="false"
      @node-click="handleClickNode">
    <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span>
            <a @click.stop="showCategory(node,data)" > 修改 </a>
            <a @click.stop="deleteCategory(node,data)" > 删除 </a>
          </span>
        </span>
    </template>
  </el-tree>
  <hr/>
  <!-- 添加商品类目表单 -->
  <!-- 对话框中添加form -->
  <el-form :model="categoryForm" label-width="120px">
    <el-form-item label="分类编号">
      <el-input v-model="categoryForm.isbn" style="width: 80%"/>
    </el-form-item>
    <el-form-item label="分类名称">
      <el-input v-model="categoryForm.cateName" style="width: 80%"/>
    </el-form-item>
    <el-form-item label="分类描述">
      <el-input v-model="categoryForm.remark" style="width: 80%"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="saveCategoryForm">保存</el-button>
      <el-button @click="clearCategoryForm">清空</el-button>
    </el-form-item>
  </el-form>

</template>

<script setup>

import {onMounted, reactive, ref} from "vue";
import { request } from '../utils/request';
import {ElMessage} from "element-plus";
//声明tree的配置
const config={
  id:'id',
  label:'label',
  children:'children'
};
//声明tree的引用
const treeRef=ref(null);
//声明树节点数据
const categoryList=ref([]);

//发送请求加载树
function queryCategoryTree(){
  request({
    url: "http://localhost:8081/categoryList",
    method: 'get'
  })
      .then((response)=>{
        categoryList.value=response.data;
      })
      .catch((error)=>{
        console.log(error);
      })
}

//加载发送请求，加载tree
onMounted(function(){
  queryCategoryTree();
});
//声明表单
const categoryForm=reactive({
  id:0,
  isbn:'',
  cateName:'',
  remark:''
})
var pnode=null;//记录当前选中的节点对象
//定义树节点的单击回调函数
function handleClickNode(node){
  //console.log(node.children);
  pnode=node;
}
//提交发送商品类目数据
function saveCategoryForm(){
  //默认保存处理增加请求的接口
  var url="http://localhost:8081/saveCategory";

  if(categoryForm.id==0){ //判断表单中是否存在id，确认是添加请求还是更新请求
    if(!pnode){
      ElMessage("必选选中某个父节点......");
      return;
    }
    if(pnode.children.length==0){
      ElMessage("只能选中一级父节点......");
      return;
    }
    categoryForm.pid=pnode.id; //指定当前新增节点的父节点
  }else{ //更新请求接口
    url="http://localhost:8081/updateCategory";
  }
  //发送ajax请求保存商品类目数据
  request({
    url: url,
    method: 'post',
    data: categoryForm
  })
      .then((response)=>{
        if(response.data.code==200){
          queryCategoryTree();
          //清空表单
          categoryForm.isbn='';
          categoryForm.cateName='';
          categoryForm.remark='';
          categoryForm.id=0;
          pnode=null;
        }
        ElMessage(response.data.msg);
      })
      .catch((error)=>{})
}
//定义函数实现商品类目树的回显
function showCategory(node,data){
  //通过id发送ajax请求
  request({
    url: `http://localhost:8081/loadCategory/${data.id}`,
    method: 'get'
  })
      .then((response)=>{
        //将响应数据赋值给表单
        categoryForm.isbn=response.data.isbn;
        categoryForm.cateName=response.data.cateName;
        categoryForm.remark=response.data.remark;
        categoryForm.id=data.id;
      })
      .catch((error)=>{
        console.log(error);
      });
}
//定义函数发生删除请求
function deleteCategory(node,data){
  if(data.children.length!=0){
    ElMessage("该节点存在叶子节点,请选中叶子节点删除........");
    return;
  }
  var id=data.id;
  request({
    url: `http://localhost:8081/deleteCategory/${id}`,
    method: 'get'
  })
      .then((response)=>{
        if(response.data.code==200){
          //刷新商品类目树
          queryCategoryTree()
        }
        ElMessage(response.data.msg);

      })
      .catch((error)=>{
        console.log(error);
      });
}

function clearCategoryForm() {
  
  categoryForm.cateName = '';
  categoryForm.remark = '';
  categoryForm.isbn= '';
}
</script>

<style scoped>
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color:darkblue !important; /* 修改为你想要的颜色 */
}


.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>